import { Space, Table, Tag, Input, InputRef, Modal, message } from 'antd'
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/lib/table'
import Bread from '../../component/bread/bread'
import axios from '@/http'
import { useEffect, useState, useRef } from 'react'
import { TUser } from '@type'
import { formatTime } from '@/util'
import { bound } from '@/util'
import EditModal from './editModal/editModal'
import Chat from './chat/chat'
const User = () => {
  const { confirm } = Modal
  const bread = ['用户', '用户管理']
  const [userData, setUserData] = useState<TUser[]>([])
  useEffect(() => {
    onChange()
  }, [])
  const columns: ColumnsType<TUser> = [
    {
      title: 'id',
      dataIndex: 'id'
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      render: (_, { avatar }) => <img src={avatar} alt="头像" width={30} height={30} style={{ borderRadius: '30px' }} />
    },
    {
      title: '用户名',
      dataIndex: 'username'
    },
    {
      title: '昵称',
      dataIndex: 'realname'
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      render: (_, { time }) => {
        return <>{formatTime(time)}</>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (_, { status }) => {
        const TagConfig = {
          1: {
            color: 'lime',
            tagName: '普通用户'
          },
          2: {
            color: 'red',
            tagName: '管理员'
          },
          3: {
            color: 'blue',
            tagName: '高级用户'
          }
        }
        return (
          <>
            <Tag color={TagConfig[status].color}>{TagConfig[status].tagName}</Tag>
          </>
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, data) => {
        const { id } = data
        return (
          <Space size="middle">
            <a onClick={() => showModal(data)}>编辑</a>
            <a onClick={() => showDeleteConfirm(id)} style={{ color: 'red' }}>
              删除
            </a>
          </Space>
        )
      }
    }
  ]
  const inputDom = useRef<InputRef>(null)
  const [loading, setLoading] = useState<boolean>(false)
  const onChange = () => {
    setLoading(true)
    bound(() => {
      const currentValue = inputDom.current?.input?.value
      axios
        .get('/user/searchFilter', {
          params: {
            username: currentValue
          }
        })
        .then(res => {
          setUserData(res.data.data)
          setLoading(false)
        })
    })
  }
  const showDeleteConfirm = (id: number) => {
    confirm({
      title: '删除用户?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除此用户？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        startDel(id)
      }
    })
  }
  const startDel = (id: number) => {
    axios
      .post('/user/del', {
        id
      })
      .then(res => {
        res.data.error === -1 ? message.success('删除成功') : message.error('删除失败')
        onChange()
      })
  }

  const EditModalDom = useRef<{ showModal: Function }>(null)
  const [userColumnData, setColumnUserData] = useState<TUser>({
    id: 0,
    avatar: '',
    password: '',
    username: '',
    realname: '',
    time: '',
    status: 1
  })
  const showModal = (data: TUser) => {
    setColumnUserData(data)
    EditModalDom.current && EditModalDom.current.showModal()
  }
  const changeUserData = (data: TUser) => {
    setColumnUserData(data)
  }
  return (
    <>
      <Bread bread={bread}></Bread>
      <Input
        onChange={onChange}
        ref={inputDom}
        style={{ width: '200px', float: 'right', marginBottom: '16px' }}
        placeholder="根据用户名称搜索"
        suffix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
      />
      <EditModal changeUserData={changeUserData} onChange={onChange} userColumnData={userColumnData} ref={EditModalDom}></EditModal>
      <Table
        scroll={{ y: 450 }}
        rowKey={record => record.id}
        loading={loading}
        columns={columns}
        dataSource={userData}
        expandable={{
          expandedRowRender: record => <Chat username={record.username}></Chat>
        }}
      />
    </>
  )
}
export default User
